<template>
    <div class="app-container">
      <!-- 返回按钮 -->
      <el-button icon="el-icon-arrow-left" @click="goBack" class="mb8">返回</el-button>

      <!-- 综合信息表格 -->
      <el-table
        ref="table"
        :data="combinedList"
        v-loading="loading"
        stripe
        highlight-current-row
        style="width: 100%; margin-top: 20px"
        :fit="true"
        border
      >
        <el-table-column
          label="名称"
          prop="docName"
          align="center"
          :resizable="true"
        />
        <el-table-column
          label="编号"
          prop="docNumber"
          align="center"
          :resizable="true"
          :sortable="true"
        />

        <el-table-column
          label="发布版本"
          align="center"
          :resizable="true"
        >
          <template #default="{row}">
            <el-tag type="success" effect="dark">{{ row.versionIdentifier }}.{{ row.iterationIdentifier }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          label="上次修改时间"
          align="center"
          :resizable="true"
          :sortable="true"
        >
          <template #default="{row}">
            {{ formatDateTime(row.releaseTime) }}
          </template>
        </el-table-column>

        <!-- 操作列设置为自适应宽度 -->
        <el-table-column
          label="操作"
          align="center"
          header-align="center"
          :resizable="false"
        >
          <template #default="{row}">
            <el-button type="text" @click="handleDetail(row)">详情</el-button>
            <!-- <el-button type="text" @click="handleDownload(row)">下载</el-button> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        v-show="total > 0"
        :total="total"
        :page-sizes="[10, 20, 50]"
        :current-page="queryParams.pageNum"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>

  <script>
    import { showData } from '@/api/system/docdraw'
    import moment from 'moment'

    export default {
        name: 'CombinedDocView',
        data() {
        return {
            loading: false,
            combinedList: [],  // 合并后的数据列表
            total: 0,
            queryParams: {
            pageNum: 1,
            pageSize: 10
            }
        }
        },
        created() {
        this.loadData()
        },
        methods: {
        // 加载数据
        async loadData() {
            try {
            this.loading = true
            const docMasterId = this.$route.query.docMasterId
            const res = await showData(docMasterId)
            if (res.code === 200 && res.rows) {
                this.combinedList = res.rows.map(item => ({
                ...item,
                // 添加需要转换的字段（如有需要）
                }))
                this.total = res.total
               // this.$message.success('文档查询成功');
            }
            } catch (error) {
            this.$message.error('数据加载失败')
            } finally {
            this.loading = false
            }
        },

        // 日期格式化
        formatDateTime(date) {
            return moment(date).format('YYYY-MM-DD HH:mm:ss')
        },

        // 分页操作
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.loadData()
        },
        handleCurrentChange(val) {
            this.queryParams.pageNum = val
            this.loadData()
        },

        // 返回
        goBack() {
            this.$router.go(-1)
        },

        // 操作按钮
        handleDetail(row) {
            //打开新标签页
            this.$router.push({
                path: '/showDetails',
                query: { docId: row.docId } // 携带文档ID
            });
        },
        handleDownload(row) {
            this.$message.success(`开始下载 ${row.versionIdentifier} 版本`)
        }
        }
    }
  </script>

  <style scoped>
  .app-container {
    padding: 20px;
  }
  .mb8 {
    margin-bottom: 8px;
  }


  </style>
